<template>
  <div class="layout">
    <div class="label-btns">
      <Button type="warning" @click="objectList.push({ key: '', value: '' })"
        >新增</Button
      >
    </div>
    <div
      v-for="(value, index) in objectList"
      :key="'objectList' + index"
      style="margin-bottom: 10px"
    >
      <Input v-model="value.key" />
      &nbsp;&nbsp;&nbsp;:
      <Input v-model="value.value" type="textarea" :autosize="true" maxlength="99999"/>
      <span slot="append">前面是价格后面是邮编，邮编用小写逗号分隔</span>
      <Button type="primary" @click="objectList.splice(index, 1)">删除</Button>
      <br />
    </div>
    <div class="label-btns">
      <Button type="primary" @click="submit('formValidate')">保存</Button>
    </div>
    <!-- <Form
      ref="formValidate"
      :label-width="150"
      label-position="right"
      :model="formValidate"
      :rules="ruleValidate"
    >
      <FormItem label="" prop="postageFee"> </FormItem>
    
    </Form> -->
  </div>
</template>
<script>
import { setSetting } from "@/api/index";
import { handleSubmit } from "./validate";

export default {
  data() {
    return {
      ruleValidate: {}, // 验证规则
      formValidate: {
        // 表单数据
        postageFee: "",
      },
      result: "",
      objectList: [],
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    // 保存
    submit(name) {
      console.log(this.objectList, "objectListobjectList");
      let that = this;
      this.setupSetting();
    },
    // 保存设置
    setupSetting() {
      this.formValidate = {};
      for (let index = 0; index < this.objectList.length; index++) {
        const element = this.objectList[index];
        this.formValidate[element.key] = element.value;
      }
      setSetting(this.type, this.formValidate).then((res) => {
        if (res.success) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },
    // 实例化数据
    init() {
      this.result = JSON.parse(this.res);
      for (let i in this.result) {
        console.log(i); //name,age
        this.objectList.push({
          key: i,
          value: this.result[i],
        });
      }

      this.$set(this, "formValidate", { ...this.result });
      Object.keys(this.formValidate).forEach((item) => {
        this.ruleValidate[item] = [
          {
            required: true,
            message: "请填写必填项",
            trigger: "blur",
          },
        ];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";

.label-item {
  display: flex;
}

/deep/ .ivu-input {
  width: 300px !important;
  margin: 0 10px;
}

.ivu-input-wrapper {
  width: 300px;
  margin-right: 10px;
}
</style>
